<template>
  <div>
    <el-dialog v-dialogDrag class="tiny-mce-dialog" :close-on-press-escape = "true" :show-close = 'false' center :modal="false" title="分配司机" width="700px" :visible.sync="isShow" @close="cancel" :close-on-click-modal="false">
      <div style="float: right">
        <span style="font-size: 16px;color: #FFBA00">总数量：<span style="font-size: 16px;color: #FFBA00">{{total.totalNum}}</span>  待分配：<span style="font-size: 16px;color: #FFBA00">{{total.surplusNum}}</span>  已分配：<span style="font-size: 16px;color: #FFBA00">{{total.allotNum}}</span></span>
      </div>
      <el-tabs v-model="activeName" style="padding: 0" type="card"  @tab-click="handleClick">
        <el-tab-pane label="待分配" name="1">
          <!--表格渲染-->
          <el-table ref="table" border :data="data" height="350px" @selection-change="handleSelectionChange">
            <el-table-column prop="carNumber" width="110" align="center"  label="车牌号" show-overflow-tooltip />
            <el-table-column prop="typeName" width="120" align="center" label="车辆类型" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.typeName | nullFilter}}/{{scope.row.carLoad | nullFilter}}
              </template>
            </el-table-column>
            <el-table-column prop="number"  align="center" label="数量" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" clearable maxlength="7" size="mini">
                  <template slot="append">吨</template>
                </el-input>
              </template>
              </el-table-column>
            <el-table-column prop="carLength" width="140" align="center" label="指派的司机" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.carUserId" placeholder="请选择">
                  <el-option
                    v-for="item in scope.row.carUserDtoList"
                    :key="item.userId"
                    :label="item.name"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130"  align="center">
              <template slot-scope="scope">
                <!--<el-button size="mini"
                           type="primary"
                           @click="createBtnClick(scope.row)">指派司机</el-button>-->
                <el-button size="mini" type="danger"
                           @click="refuseBtnClick(scope.row)">保存</el-button>
              </template>
            </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="已分配" name="2">
          <el-table ref="table" border :data="data" height="350px" @selection-change="handleSelectionChange">
            <el-table-column prop="carNumber" width="110" align="center"  label="车牌号" show-overflow-tooltip />
            <el-table-column prop="typeName" width="120" align="center" label="车辆类型" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.typeName | nullFilter}}/{{scope.row.carLoad | nullFilter}}
              </template>
            </el-table-column>
            <el-table-column prop="number"  align="center" label="数量" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" clearable maxlength="7" size="mini">
                  <template slot="append">吨</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="carUserId" width="140" align="center" label="指派的司机" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.carUserId" placeholder="请选择">
                  <el-option
                    v-for="item in scope.row.carUserDtoList"
                    :key="item.userId"
                    :label="item.name"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130"  align="center">
              <template slot-scope="scope">
                <!--<el-button size="mini"
                           type="primary"
                           @click="createBtnClick(scope.row)">指派司机</el-button>-->
                <el-button size="mini" type="danger"
                           @click="refuseBtnClick1(scope.row)">修改保存</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" style="text-align:right" class="dialog-footer">
        <el-button type="primary" v-if= "this.item.falg" size="mini" v-loading.fullscreen.lock="fullscreenLoading" @click="save">确定添加</el-button>
        <el-button type="info" size="mini" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MyImg from '@/components/img/img'
export default {
  name: 'DriverStaff',
  props: ['showFormPanel', 'item'],
  data () {
    return {
      activeName: '1',
      data: [],
      phone: null,
      matchData: {},
      total: {},
      options: [],
      showOperation:false,
      fullscreenLoading: false,
      customVal: {imgName: ''},
      showTreeDialog: false,
      selectOrgExpandAll: false,
      ruleForm: this.item,
      roleOptions: [],
      isShow: this.showFormPanel
    }
  },
  filters: {
    formatStatus: function (val) {
      if (val === 'LOCK') {
        return false
      } else if (val === 'NORMAL') {
        return true
      }
      return '-'
    }
  },
  methods: {
    toQueryInfo() {
      let self = this
      let par = {
        transportTakeOrderId: self.item.transportTakeOrderId,
        status: self.activeName
      }
      self.$http.post("/api/orderManages/findAllotList", par).then(function(value) {
        if (value.ok){
          self.options = value.data.carDrivingDtos.carUserDtoList
          self.total = value.data
          self.data = value.data.carDrivingDtos
        }
      })
    },
    handleClick(){
      this.toQueryInfo()
    },
    selectVehicleType (val) {
      if (!val){
        this.ruleForm.typeName = null
        return
      }
      let obj = {}
      obj = this.vehicleTypes.find((item) => {
        return item.id === val
      })
      this.ruleForm.typeName = obj.name
    },
    refuseBtnClick (val) {
      let self = this
      debugger
      val.transportTakeOrderId = self.item.transportTakeOrderId
      self.$http.post('/api/orderManages/allotSave', val)
          .then(function (res) {
            self.fullscreenLoading = false
            self.cancel()
            self.$emit('refreshList')
          }).catch(function (error) {
            self.fullscreenLoading = false
            console.log(error)
      })
    },
    refuseBtnClick1 (val) {
      let self = this
      val.transportTakeOrderId = self.item.transportTakeOrderId
      self.$http.post('/api/orderManages/allotUpdate', val)
          .then(function (res) {
            self.fullscreenLoading = false
            self.cancel()
            self.$emit('refreshList')
          }).catch(function (error) {
            self.fullscreenLoading = false
            console.log(error)
      })
    },
    cancel (){
      this.isShow = false
      this.$emit('update:showFormPanel', this.isShow)
    }
  },
  mounted: function () {
    this.toQueryInfo()
  },
  components: {
    MyImg
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 15px;
}
.mark-body{
  position:fixed;
  left:0px;
  top:0px;
  background:rgba(0, 0, 0, 0.18);
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height:100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  z-Index:999;
}
aside {
  /* background: #eef1f6; */
  /* padding: 6px 5px; */
  background: none;
  padding: 0px 24px;
  margin-bottom: 1px;
  border-radius: 2px;
  display: block;
  /* line-height: 50px; */
  /* font-size: 48px; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  color: #2c3e50;
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
}
</style>
